<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import SubmitBtn from '@/components/SubmitBtn.vue'
import { carListApi } from '@/apis/car.js'

const formData = ref({
  applicantopinion: "",// 审批意见
  carid: "", // 车辆ID

})
const carName = ref("")

onLoad(options => {
  if (!options.data) return
  const data = JSON.parse(options.data)
  formData.value = { ...formData.value, ...data, status: '1', planid: data.id }
})

const confing = {
  api: '/logistics/outplan',
  requiredFields: [{
    key: 'carid',
    name: '车辆',
    type: 'select'
  }, {
    key: 'applicantopinion',
    name: '审批意见',
  },
  ]
}

const carShow = ref(false)
const carList = ref([])
const handlerSelectCar = () => {
  if (!carList.value.length) return uni.$u.toast("请先添加车辆")
  carShow.value = true
}
const selectCar = item => {
  formData.value.carid = item[0].value
  carName.value = item[0].label
}
const getCarList = async () => {
  const res = await carListApi({ pageSize: 100, pageNum: 1 })
  if (!res.rows.length) return
  carList.value = res.rows.map(item => ({ label: item.platenumber, value: item.id }))
}
getCarList()

const handlerGoodsDetail = () => {
  console.log(" formData.value", formData.value)
  const data = JSON.stringify(formData.value)
  uni.navigateTo({
    url: `/pages/reservation/outplanGoods/index?data=${data}`
  })
}
</script>

<template>
  <view class="carinfo page_container">
    <view class="content">
      <u-form :model="formData" label-width="200">
        <u-form-item label="客户:">
          <u-input v-model="formData.company" disabled />
        </u-form-item>
        <u-form-item label="计划名称:">
          <u-input v-model="formData.planname" type="textarea" disabled />
        </u-form-item>
        <u-form-item label="预计到达时间:">
          <u-input v-model="formData.expectdate" disabled />
        </u-form-item>
        <u-form-item label="备注:">
          <u-input v-model="formData.memo" type="textarea" disabled />
        </u-form-item>
        <u-form-item label="车辆:" required>
          <u-input v-model="carName" @click="handlerSelectCar" type="select" placeholder="请选择车辆" />
        </u-form-item>
        <u-form-item label="审批意见:" required>
          <u-input v-model="formData.applicantopinion" type="textarea" placeholder="请输入审批意见" />
        </u-form-item>
        <view style="padding: 20rpx 0; text-align: left">
          <u-button @click="handlerGoodsDetail" style="width: 200rpx;" type="primary">货物详情</u-button>
        </view>
      </u-form>
    </view>
    <u-select v-model="carShow" :list="carList" @confirm="selectCar"></u-select>
    <SubmitBtn v-bind="confing" :formData="formData" />
  </view>
</template>

<style lang="scss" scoped>
.carinfo {
  min-height: 100vh;
  background: #f5f5f5;
  padding-top: 20rpx;

  .content {
    background: #fff !important;
    border-radius: 20rpx;
    padding: 0 40rpx;
    margin-bottom: 100rpx;
  }
}

::v-deep .uicon-plus {
  margin-top: 4rpx;
}
</style>